Repository navigation
Highlight C#, shell, PowerShell and HTTP code blocks - #2781
Conversation
TinaCMS's prism-react-renderer bundle omits csharp/bash/powershell/http/dotenv, so hundreds of SSW Rules tagged with those languages render monochrome. Register the missing PrismJS grammars into the shared prism-react-renderer registry (with cs→csharp and shell→bash aliases) and cover them with a unit test. Prepared with AI assistance.
Drop the custom dotenv grammar and PowerShell flag tweak. Load csharp, bash, powershell and http from prismjs/components onto prism-react-renderer's Prism (documented custom-language approach), with cs/dotnet->csharp and sh/shell->bash aliases. Prepared with AI assistance.
jernejk
changed the title
There was a problem hiding this comment.
🟢 Approval recommended
No active review issues are identified for the added syntax-highlighting support.
No open issues 🎉
1 file not reviewed
pnpm-lock.yaml: Generated file
What changed in this PR
Adds syntax highlighting for C#, shell, PowerShell, and HTTP code blocks in SSW.Rules by registering upstream Prism grammars with the renderer used by TinaCMS.
Changes:
- Registers four grammars and common C# and shell language aliases.
- Loads the grammars through the shared typography components.
- Adds pinned dependencies and unit tests for grammar registration and tokenization.
| File | Description |
|---|---|
pnpm-lock.yaml |
Locks the added Prism dependencies. |
package.json |
Declares Prism renderer, grammar, and type dependencies. |
lib/prism-grammars.ts |
Registers upstream grammars and language aliases. |
components/typography-components.tsx |
Imports grammar registration for code-block rendering. |
__tests__/lib/prismGrammars.test.ts |
Tests tokenization for the added languages and aliases. |
Review effort: Balanced
bradystroud
left a comment
bradystroud
left a comment
There was a problem hiding this comment.
Reviewed and tested locally: frozen install, new prism grammar tests pass (4/4), biome clean, Turbopack compile build succeeds. Confirmed globalThis.Prism is set before the grammar require()s in both client and SSR chunks, and tinacms resolves the same prism-react-renderer 2.4.1, so the grammars register where Tina's Highlight reads them.
Non-blocking follow-up: if a future tinacms bump pulls a second prism-react-renderer copy, highlighting would silently go back to monochrome while this test still passes. A pnpm override or a test through tinacms/dist/rich-text/prism would guard that.
GitHub Actions
Failure
…e admin starts again (#2807) Since #2781, the Tina admin stops at load with "Dynamic require of "prismjs/components/prism-csharp" is not supported", and it then shows "Failed loading TinaCMS assets". The admin is a browser ES module bundle, and lib/prism-grammars.ts used require calls. - The grammars load as static imports on the prismjs core instance, and the module copies them to the Prism instance of prism-react-renderer. - A form that sets the global Prism from an ES module does not work: the bundler runs the grammar code first, and the admin stops with "Prism is not defined" (tested). - PrismJS.manual is true, so the prismjs core does not highlight the code blocks that React renders. Tested: production admin and a local admin build in headless Chromium. Before, the asset error. After, the admin loads. The grammar tests pass (one new test). Claude-Session: https://claude.ai/code/session_01UTtNDpWnuaUUQ2winSSgMb Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
|
Hey @bradystroud FYI would have preferred JK choose to use YakShaver - it's a nicer way to see and hear the context. Agree? -a |
Description
✅
prism-react-renderer, whose bundled language set has nocsharp/cs,bash/shell/sh,powershellorhttpgrammars.csharp/csalone) and render monochrome on https://www.ssw.com.au. Example: Aspire — YAML is coloured, C# is not (token plainonly).PrismtoglobalThis, then load upstreamprismjs/components(prism-csharp,prism-bash,prism-powershell,prism-http) so they register onto that same instance. Aliases:cs/dotnet→csharp,sh/shell→bash.components/typography-components.tsx. Direct deps:prism-react-renderer@2.4.1,prismjs@1.30.0,@types/prismjs@1.26.6(lockfile regenerated with pnpm).__tests__/lib/prismGrammars.test.ts(csharp/cs/dotnet, bash/sh/shell, powershell, http).Prepared with AI assistance.
Screenshot (optional)
✅
Captured from the local Jackdaw preview of centralise-local-dev-config-and-secrets-in-apphost with the import removed, then restored.
Before (C# block — 1 computed token colour)
After (same C# block — 4 computed token colours)
Full-page before/after (optional): before · after
Verification
pnpm exec biome linton the touched files — passpnpm exec tsc --noEmit— passpnpm exec jest __tests__/lib/prismGrammars.test.ts— 4/4 pass